<template>
    <div class="wrap" :class="{sideMove:sideOpen}">
        <!-- 信息介绍 -->
         <!-- 播放地址 -->
        <div class="rec-side tl">
          <!-- 介绍 -->
          <div class="intro flex">
            <img class="pre" ng-show="roleData" :src="roleData.nameImgs[0]?roleData.nameImgs[0].url:roleData.introImgs[0].url">
            <div class="txt">
                <p>
                  简介： <span>{{roleData.name}}</span>
                <p>
                  <p>
                  职责： <span>{{roleData.des}}</span>
                <p>
                <p>
                  {{ currentDetail }}
                  <span
                    v-if="isShowMoreDetail"
                    @click="showMoreDetail"
                  >...</span>
                  <span
                    v-if="isShowMoreDetail"
                    @click="showMoreDetail"
                    style="color:skyblue"
                  >[更多]
                  </span>
                  <span
                    v-if="!isShowMoreDetail"
                    @click="hideMoreDetail"
                    style="color:skyblue"
                  >[收起]
                  </span>
                </p>
            </div>
          </div>
          <div
            class="poster flex"
            @mouseout="hidePoster"
          >
            <div class="poster_box flex"
              @mousemove="showPoster(i)"
              v-for="(src,i) in roleData.introImgs"
              :key="i"
            >
              <el-image
                class="img_box"
                :src="src.url"
                fit="cover">
              </el-image>
            </div>
          </div>
          <!-- 左侧主分类 -->
          <div class="tag flex-st">
              <a  v-for="(type,i) in movie.tagsArray"
              :key="i"  @click="jump(type[0].name)" href="javascript:void(0)" >{{type[0].name}}</a>
              <!-- <a @click="jump('微电影')" href="javascript:void(0)" >微电影</a>
              <a @click="jump('游戏')" href="javascript:void(0)">游戏</a>
                <a @click="jump('微电影1')" href="javascript:void(0)">微电影1</a>
                <a @click="jump('微电影2')" href="javascript:void(0)">微电影2</a>
                <a @click="jump('微电影3')" href="javascript:void(0)">微电影3</a>
                <a @click="jump('微电影4')" href="javascript:void(0)">微电影4</a> -->
          </div>
        </div>

        <div class="member" >
          <div class="poster  flex-st" id='topImages'>
            <div
              class="img_box"
              :class="{'act':posterIndex===i||posterIndex===''}"
              v-for="(src,i) in roleData.introImgs"
              :key="i"
            >
              <!-- 遮罩层 -->
              <div class="mask">
              </div>
                <el-image
                  class="img_box"
                  :src="src.url"
                  fit="cover">
                </el-image>
            </div>

          </div>
          <!-- 选项区域 -->
            <div class="tag">
              <ul class="flex-st" @click="clickVideoType">
                <li>全部</li>
                <!-- 声音类型 -->
                <li v-for="(sub,i) in movie.hallmarkArray" :key="i">{{sub}}</li>
                <!-- langArray -->
                <li v-for="(sub,i) in movie.langArray" :key="i">{{sub}}</li>
                <!-- 年龄段 -->
                <li v-for="(sub,i) in movie.sixlIstArray" :key="i">{{sub}}</li>
              </ul>
            </div>

            <!-- 结果区域 -->
            <div class="res_list">
              <div class="list" :id="type[0].name" v-for="(type,i) in movie.tagsArray" :key="i">
                <div class="name tl" @click="showVideo">{{type[0].name}}</div>
                <div class="con flex-sb">
                  <div class="item flex-sb" v-for="(item,i) in movie.data" :key="i" @click="showVideo(e,item)"
                    v-if="type[0].name === item.tags[0].name"
                  >
                    <img class="pre" :src="item.preImg">
                    <div class="des tl">
                      <a href="//www.timelessq.com/bangumi/31.html" :title="item.name" class="bangumi-list__title">{{item.name}}</a>
                      <p><span class="para-name">时间：</span>{{new Date(item.created_at).toLocaleDateString()}}</p>
                      <p class="hidden-xs-only"><span class="para-name">简介：</span>{{item.des}}</p>
                    </div>
                  </div>
                </div>
              </div>
               <!-- <div class="list" id="游戏" >
                <div class="name tl">游戏</div>
                <div class="con flex-sb">
                  <div class="item flex-sb" >
                     <img class="pre" src="http://cdn.timelessq.com/upload/201904/thumb/8904bae1bfe1e9b3-330x440.webp">
                    <div class="des tl">
                      <a href="//www.timelessq.com/bangumi/31.html" title="请吃红小豆吧！" class="bangumi-list__title">请吃红小豆吧！</a>
                      <p><span class="para-name">时间：</span>2018-07-05</p>
                      <p class="hidden-xs-only"><span class="para-name">简介：</span>红小豆是一颗梦想着被吃掉的红豆，灵魂伴侣是一颗只会废柴技能的珍珠李建勋，还有毫无存在感的芦荟Anthony，会变大变小变……</p>

                    </div>
                  </div>
                  <div class="item flex-sb flex-sb" >
                     <img class="pre" src="http://cdn.timelessq.com/upload/201904/thumb/8904bae1bfe1e9b3-330x440.webp">
                    <div class="des tl">
                      <a href="//www.timelessq.com/bangumi/31.html" title="请吃红小豆吧！" class="bangumi-list__title">请吃红小豆吧！</a>
                      <p><span class="para-name">时间：</span>2018-07-05</p>
                      <p class="hidden-xs-only"><span class="para-name">简介：</span>红小豆是一颗梦想着被吃掉的红豆，灵魂伴侣是一颗只会废柴技能的珍珠李建勋，还有毫无存在感的芦荟Anthony，会变大变小变……</p>

                    </div>
                  </div>
                </div>
              </div>
               <div class="list" id="微电影1" >
                <div class="name tl">微电影1</div>
                <div class="con flex-sb">
                  <div class="item flex-sb" >
                     <img class="pre" src="http://cdn.timelessq.com/upload/201904/thumb/8904bae1bfe1e9b3-330x440.webp">
                    <div class="des tl">
                      <a href="//www.timelessq.com/bangumi/31.html" title="请吃红小豆吧！" class="bangumi-list__title">请吃红小豆吧！</a>
                      <p><span class="para-name">时间：</span>2018-07-05</p>
                      <p class="hidden-xs-only"><span class="para-name">简介：</span>红小豆是一颗梦想着被吃掉的红豆，灵魂伴侣是一颗只会废柴技能的珍珠李建勋，还有毫无存在感的芦荟Anthony，会变大变小变……</p>

                    </div>
                  </div>
                </div>
              </div>
               <div class="list" id="微电影2" >
                <div class="name tl" >微电影2</div>
                <div class="con" @click="showVideo">
                </div>
              </div>
               <div class="list" id="微电影3" >
                <div class="name tl" >微电影3</div>
                <div class="con" @click="showVideo">
                </div>
              </div>
               <div class="list" id="微电影4" >
                <div class="name tl" >微电影4</div>
                <div class="con" @click="showVideo">
                </div>
              </div> -->

            </div>
        </div>
        <div class="side_bar">
          <div class="player">
            <video-player
              class="video-player vjs-custom-skin"
              ref="videoPlayer"
              :playsinline="true"
              :options="playerOptions"
              @play="onPlayerPlay($event)"
              @pause="onPlayerPause($event)"
            >
            </video-player>
          </div>
          <div class="des tl" style="padding:15px">
            <a href="//www.timelessq.com/bangumi/31.html" title="请吃红小豆吧！" class="bangumi-list__title">{{param.name}}</a>
            <p><span class="para-name">时间：</span>{{new Date(param.created_at).toLocaleDateString()}}</p>
            <p class="hidden-xs-only"><span class="para-name">简介：</span>{{param.des}}</p>
          </div>
        </div>
    </div>
</template>

<script>
import { videoPlayer } from "vue-video-player";
import { getVideoSrc } from "../api/index";
import { search,searchRole,rolePoster} from "../api/index";
export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      param:'',
      id:'',
      data: "",
      movie:[],
      videos: [],
      roleData:[],
      // 默认展示
      currentDetail: '',
      completeDetail: ``,
      posterIndex: "",
      sideOpen: false,
      tempData: {
        imgList: [
          "https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C32%2C1055%2C1488%3Bh%3D780%3Bq%3D70/sign=579b4bee8613632701a29873acbf8cdf/503d269759ee3d6d13bf50f94f166d224f4ade83.jpg",
          "https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C32%2C1055%2C1488%3Bh%3D780%3Bq%3D70/sign=b952e14d74f0f736ccb1164137659f2a/b64543a98226cffc0c216880b5014a90f603eafd.jpg",
          "https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D953%2C0%2C873%2C1229%3Bw%3D552%3Bq%3D70/sign=c0eaac04dd00baa1ae631dfb7a298c21/7e3e6709c93d70cf6410cbe5f4dcd100bba12b6b.jpg",
          "https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D764%2C0%2C873%2C1229%3Bw%3D552%3Bq%3D70/sign=ceb9f3c6a4d3fd1f2246f87a0d79132b/6d81800a19d8bc3efd0766228e8ba61ea9d345ce.jpg"
        ]
      },
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            // type: "application/x-mpegURL",
            type: "video/mp4",
            src: " http://qn.ty8000.com/demo1.mp4" //你的m3u8地址（必填）
          }
        ],
        poster: "http://qn.ty8000.com/image/micro/sjmn.jpg", //你的封面地址
        width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试" //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        //  controlBar: {
        //    timeDivider: true,
        //    durationDisplay: true,
        //    remainingTimeDisplay: false,
        //    fullscreenToggle: true  //全屏按钮
        //  }
      }
    };
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
    inCompleteDetail () {
      // return this.completeDetail.slice(0, 141)
      return this.completeDetail.slice(0, 80)
    },
    isShowMoreDetail () {
      const {
        currentDetail,
        inCompleteDetail
      } = this
      return currentDetail === inCompleteDetail
    }
  },
  methods: {
    clickVideoType (e) {
      if (e.target.nodeName === 'LI') {
        console.log(e.target.innerText)
        const videoType = e.target.innerText
        const {
          videos = []
        } = this

        if (videoType === '全部') {
          this.movie.data = videos
          return
        }

        this.movie.data = videos.filter((item) => {
          return videoType === item.hallmarks[0] || videoType === item.language || videoType === item.sixList[0]
        })
      }
    },
    getPoster() {
      rolePoster({
        id: this.id,
        page: 0,
        pageSize: 10,
      })
        .then(res => {
          this.movie=res.data||[];
          this.videos = res.data.data||[];
          //去除tagsArray重复
          var arr=[]
          var arrName=[]
          this.movie.tagsArray.forEach(function(ele){
            if(arrName.indexOf(ele[0].name)==-1) {
              arrName.push(ele[0].name)
              arr.push(ele)
            }
          })
          this.movie.tagsArray=arr;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 查询角色信息
    getList() {
      searchRole({
        id: this.id,
        page: 0,
        pageSize: 10,
        // name:'大b'
      })
        .then(res => {
          console.log(res.data.data)
          this.roleData = res.data.data||[];
          this.completeDetail=res.data.data.intro;
          this.currentDetail=res.data.data.intro;
        })
        .catch(err => {
          console.log(err);
        });
    },
    hideMoreDetail () {
      this.currentDetail = this.inCompleteDetail
    },
    showMoreDetail () {
      this.currentDetail = this.completeDetail
    },
    onPlayerPlay(player) {
      console.log("play");
    },
    onPlayerPause(player) {
      console.log("pause");
    },
    // 展示侧边视频
    showVideo(e,param) {
      console.log(11,param)
      this.sideOpen = !this.sideOpen;
      this.param=param?param:this.param;
    },
    // 展示对应海报
    showPoster(i) {
      this.posterIndex = i;
      this.jump('topImages')
    },
    hidePoster() {
      this.posterIndex = "";
    },
    jump(name) {
      let section = document.getElementById(name);
      if (section) {
        section.scrollIntoView({
          behavior: 'smooth'
        });
      }
    },

    changePage() {
      search({
        name: this.$route.query.name,
        page: this.curPage - 1,
        pageSize: 5,
        tagId: ""
      })
        .then(res => {
          this.data = res.data.data[0];
          // fix
          this.data.roles = this.data.roles.slice(0, 1);
          this.total = res.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    // var loginLog = {
    //   ip: returnCitySN["cip"],
    //   city: returnCitySN["cname"] + "-增删改查页"
    // };

    this.getList();
    this.getPoster();
  },
  created() {
    this.id=this.$route.query.id;
    this.hideMoreDetail()
    this.changePage();
    // this.playerOptions.sources[0].src = JSON.parse(
    //   this.$route.query.data
    // ).playUrl;
    // getVideoSrc(this.$route.query.id)
    //   .then(res => {
    //     //  this.playerOptions.sources[0].src=res.data.data[0].playLink;
    //     //  this.playerOptions.sources[0].src=this.props.url;
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });
  }
};
</script>
<style lang="scss" scoped>
.des .bangumi-list__title {
  display: inline-block;
  font-size: 18px;
  max-width: 100%;
  color: #409eff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 5px;
}
.des .para-name,.des .para-name{
  color: #909399;
}
.header {
  position: fixed;
  // z-index:99;
  background: #fff;
}
// 具体信息介绍
.shadow-box {
  width: 100%;
  padding: 20px;
}
.wrap {
  // 左侧信息
  .rec-side {
    position: fixed;
    overflow-y: auto;
    left: 0;
    margin-left: 0;
    top: 0;
    // top: 50%;
    height: 100%;
    // transform: translateY(-50%);
    width: 350px;
    background: #fff;
    padding: 20px 15px;
    .pre {
      border-radius: 50%;
      width: 120px;
      height:120px;
    }
    // 简介
    .intro {
      padding-top: 70px;
      overflow: hidden;
      align-items: flex-start;
      .txt {
        margin-left: 15px;
        flex: 1;
      }
    }
    // 海报预览
    .poster {
      margin-top: 10px;
      flex-wrap: wrap;
      .poster_box {
        overflow: hidden;
        width: 50%;
        cursor: pointer;
      }
      .img_box {
        height: 100px;
        &:hover {
          transform: scale(1.1);
        }
        .act {
          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: rgba(255, 0, 0, 0.5);
            opacity: 0.3;
          }
          img {
            width: 100%;
          }
        }
      }
    }
    // 分类
    .tag {
      margin: 30px auto;
      flex-wrap: wrap;
      a {
        margin: 5px 10px;
        padding: 0 15px;
        background: red;
        display: block;
      }
    }
  }
  .member {
    overflow: hidden;
    margin-top: 70px;
    padding-left: 270px;
    .poster {
      padding-top: 50px;
      .act {
        .mask {
          display: none;
        }
      }
      .img_box {
        position: relative;
        .mask {
          position: absolute;
          z-index: 9;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.4);
        }
      }
    }
    // 播放地址
    .right_des {
      width: 860px;
      .link-box {
        justify-content: flex-start;
        flex-wrap: wrap;
        a {
          display: block;
          width: 77px;
          height: 45px;
          line-height: 45px;
          font-size: 18px;
          background: #f7f7fc;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
    //选项区域
    .tag {
      li {
        margin: 5px;
        padding: 10px 15px;
        background: skyblue;
        color: #fff;
        cursor: pointer;
      }
    }
    .res_list {
      .list {
        width: 100%;
        margin: 10px auto;
        .name {
          background: #ccc;
          padding: 0 15px;
          line-height: 40px;
        }
        .con {
          // background: #000;
          // 单个视频列表
          flex-wrap: wrap;
          .item {
            margin-bottom: 20px;
            width: 49%;
            background: #fff;
            height: 235px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            align-items: flex-start;
           img {
             width:176px;
              height: 100%;
            }
            .des {
              flex: 1;
              padding:10px 12px;
              a {
                display: inline-block;
                font-size: 18px;
                max-width: 100%;
                color: #409eff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 5px;
              }
              p {
                font-size: 14px;
                line-height: 1.6;
                color: #606266;
                .para-name {
                  color:#909399;
                }
              }
            }
          }
        }
      }
    }
  }

  // 侧边栏
  //   侧边播放

  .side_bar {
    position: fixed;
    right: -500px;
    top: 0px;
    width: 500px;
    z-index: 9;
    padding: 0.2rem 0;
    // transform: translateX(10%);
    transition: all 0.5s ease;
    min-height: 100%;
    background: #ccc;
  }
  .player {
    margin-top: 70px;
  }
}
.sideMove {
  .side_bar {
    transform: translateX(-100%);
  }
}
</style>
